<template>
  <div class="demo-datetime-picker">
    <!--    <div class="block">-->
    <!--      <span class="demonstration">Default</span>-->
    <!--      <el-date-picker-->
    <!--          v-model="value1"-->
    <!--          type="datetime"-->
    <!--          placeholder="Select date and time"-->
    <!--      />-->
    <!--    </div>-->
    <!--    <div class="block">-->
    <el-date-picker
        v-model="time"
        v-bind="attrs"
        :type="type"
        placeholder="请选择日期时间"
        value-format="YYYY-MM-DD HH:mm:ss"
        format="YYYY-MM-DD HH:mm:ss"
        :default-time="defaultTime"
        :shortcuts="shortcuts"
        @change="dateChange"
    />
    <!--    </div>-->
    <!--          :default-time="defaultTime"-->
    <!--    <div class="block">-->
    <!--      <span class="demonstration">With default time</span>-->
    <!--      <el-date-picker-->
    <!--          v-model="value3"-->
    <!--          type="datetime"-->
    <!--          placeholder="Select date and time"-->
    <!--          :default-time="defaultTime"-->
    <!--      />-->
    <!--    </div>-->
  </div>
</template>

<script setup name="DateTimePicker">
import {ref, watch, computed, useAttrs} from 'vue'
import {formatDate} from "/@/utils/formatTime";


const defaultTime = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS")
const attrs = useAttrs()
const props = defineProps({
  value: { // 传入的数据
    type: Date || String || Array || null || undefined,
    default: () => {
    },
  },
  type: { // 传入的数据
    type: String,
    default: 'datetime',
  },
  plusTime: { // 传入的数据
    type: Boolean,
    default: false,
  }
})

const emits = defineEmits([
  "update:modelValue", "change",
])
// const defaultTime = new Date()

let time = computed({
  get() {
    return props.value
  },
  set(val) {
    emits('update:modelValue', val)
  }
})

const dateChange = (val) => {
  // console.log('调用子组件方法传参val：', val)
  const {type} = props
  if (type === 'daterange' && val) {
    let startTime = val[0]
    let endTime = val[1]
    if (props.plusTime) {
      startTime = startTime + ' 00:00:00'
      endTime = endTime + ' 23:59:59'
    }
    time.value = [startTime, endTime]
    emits('change', [startTime, endTime])
  } else {
    // console.log('不是时间范围val：', val)
    emits('change', val)
  }
}
const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

watch(
    () => props.value,
    (val) => {
      time.value = val
    },
    {deep: true}
)
</script>

<style scoped>
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-datetime-picker .block:last-child {
  border-right: none;
}

.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
